<template>
  <svg :viewBox="`0 0 ${size} ${size}`" class="loading-svg">
    <circle :cx="Number(size) / 2"
            :cy="Number(size) / 2"
            r="20" fill="none" class="path"
            :class="[type]"
            :style="{stroke: color}" />
  </svg>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { ComponentsThemeType } from '../types/components'

defineProps({
  // 按钮类型
  type: {
    type: String as PropType<ComponentsThemeType>,
    default: 'default'
  },
  size: {
    type: [String, Number] as PropType<string | number>,
    default: '50'
  },
  color: {
    type: String as PropType<string>,
    default: ''
  }
})
</script>

<style scoped lang="scss">
@import "../scss/base.scss";

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 126;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 95, 126;
    stroke-dashoffset: -34rem;
  }

  to {
    stroke-dasharray: 10, 126;
    stroke-dashoffset: -252rem;
  }
}

@keyframes loading-svg-animation {
  to {
    transform: rotate(1turn);
  }
}

.loading-svg {
  display: inline-block;
  width: 30rem;
  height: 30rem;
  margin-right: 10rem;
  transform-origin: center center;
  animation: loading-svg-animation 1s infinite linear;

  .path {
    stroke-width: 4;
    animation: loading-dash 1.5s ease-in-out infinite;

    @each $type, $color in $button-color-list {
      &.#{$type} {
        stroke: $color;
      }
    }
  }
}
</style>
